<template>
  <div>
    <px-button class="mb-[16px]" type="primary" @click="handleBack">
      <px-icon><ArrowLeft /></px-icon> 返回
    </px-button>
    <ReEditor ref="editorRef" v-model="content" editor-height="500px" placeholder="请输入公告内容" />
    <Teleport to="#alert__rules__index">
      <div class="px-dialog-footer">
        <px-button @click="handleBack">取消</px-button>
        <px-button type="primary" @click="handleSave">保存</px-button>
      </div>
    </Teleport>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from "vue";
import { PxMessage } from "px-ui";

import ReEditor from "@/components/ReEditor/index.vue";
import { getAlarmDescription, updateAlarmDescription } from "@/api/alarm";

import { PropsTypeForEdit, EmitsTypeForEdit } from "../type";

const props = defineProps<PropsTypeForEdit>();
const emit = defineEmits<EmitsTypeForEdit>();

const content = ref("");
const editorRef = ref(null);

const handleBack = () => {
  emit("close");
};

const handleSave = async () => {
  if (!content.value) return;
  await updateAlarmDescription({ id: props.id, content: content.value });
  PxMessage({
    type: "success",
    message: "更新成功!"
  });
};

const getAlarmDescriptionInfo = async () => {
  const res = await getAlarmDescription({ className: props.className });
  if (res.content) {
    content.value = res.content;
  }
};

watchEffect(() => {
  if (props.className) {
    getAlarmDescriptionInfo();
  }
});
</script>

<style lang="scss" scoped>
.px-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-top: 10px;
  padding-right: 34px;
  text-align: right;
  background: white;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 16%);
}
</style>
